<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
	    html,body{width:100%;height:100%;}
	    body
	    {
	    	font-size:12px;
	    	color:black;
	    	margin:0px;
	    	font-family:宋体;
	    	line-height:16px;
	    }
	    html
	    {
	    	SCROLLBAR-FACE-COLOR: #C0DFED; 
            SCROLLBAR-HIGHLIGHT-COLOR: #DCEEF6; 
            SCROLLBAR-SHADOW-COLOR: #cccccc; 
            SCROLLBAR-3DLIGHT-COLOR: #ABCFE1;
            SCROLLBAR-ARROW-COLOR: #556C80; 
            SCROLLBAR-TRACK-COLOR: #EBF3F6; 
            SCROLLBAR-DARKSHADOW-COLOR: #C4DEEA;
	    }
	    p{margin:0;padding:0px;clear:left;}
	    img{border:0;}
	    
	    #sortcontainer{padding:0px;}
	    .portlet{padding:5px 10px;cursor: move;}
	    .clicked{padding:4px 9px 4px 10px;border:solid 1px #8CBCED;border-left:none;background: #F5FAFE;color:#505050;}
	    
	    
	    .portlet_topper{position:relative;}
	    .sort_placeholder{background-color:#DCF6FF;}
	    .timelimit{color:#006EFE;display:none;} 
	    .timelimit a:link,
	    .timelimit a:visited,
	    .timelimit a:hover{color:#42B475; text-decoration:none;}
	    .timelimit a{ display:none;}
	    
	    div.hastime,
	    div.clicked div.timelimit{display:block;}
	    div.clicked div.timelimit a{display:inline;}
	    div.clicked div.timelimit a.unlimit{display:none;}
	    div.clicked div.timelimit a.limit{display:inline;}
	    
	    div.clicked div.untimelimit a.unlimit{display:inline;}
	    div.clicked div.untimelimit a.limit{display:none;}
	    .datepicker{width:1px;height:1px;line-height:1px;overflow:hidden;padding:0px;margin:0; border-width:0px;}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script language="javascript" type="text/javascript" src="Resource/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="Resource/interface.js"></script> 
    
    <link type="text/css" href="Resource/jquery-ui-1.7.custom.css" rel="stylesheet" />
    <link type="text/css" href="Resource/blue2.css" rel="stylesheet" />
	<script type="text/javascript" src="Resource/jquery-ui-1.7.custom.min.js"></script>
    <script type="text/javascript" src="Resource/ui.datepicker-zh-CN.js"></script>
    <script language="javascript" type="text/javascript">
        function addItem(html)
        {
            
            var reg=new RegExp("<img src=\"(.*?)\"\s*\/?>","ig");
            var html=html.replace(reg,'<img ondblclick="window.open(this.src);" alt="双击查看" src="$1" tag="" onload="$(this).attr(\'tag\',this.width);if(document.body.clientWidth-28<this.width){ this.width=document.body.clientWidth-28;}" />');
            
            var h='<div class="item portlet" onclick="itemclick(this);">';
            h+= '<div class="timelimit"><span></span><input class="datepicker" type="text" /> <a href="#" onclick="removeCmd(this);">删除记录</a> <a href="#" class="limit" onclick="addTimeLimit(this);">限制时间</a> <a href="#" class="unlimit" onclick="delTimeLimit(this);">取消</a></div>';
            h+= html+'</div>';
            $('#sortcontainer').append(h);
            bind();
        }
        function itemclick(obj)
        {
            $('div.portlet').each(function(){
                $(this).removeClass('clicked');
            });
            var t= $(obj).children('.timelimit');
                                   
            $(obj).addClass('clicked');
        }        
        function bind()
		{
			$('#sortcontainer').Sortable(
				{
					accept: 'portlet',
					helperclass: 'sort_placeholder',
					opacity: 0.7,
					tolerance: 'intersect',
					delay : 100
				}
			);
		}
		function addTimeLimit(linkObj)
		{
		    var p=$(linkObj).parent();
		    p.addClass('untimelimit');
		    var c=p.children('.datepicker');
		    c.datepicker({onClose: function(dateText, inst) {p.addClass('hastime').children('span').html(dateText);}});
		    c.datepicker('option', {dateFormat: 'yy年mm月dd日'})
		    c.datepicker('show');
		}
		function delTimeLimit(linkObj)
		{
		    var p=$(linkObj).parent();
		    p.removeClass('untimelimit').removeClass('hastime');
		    p.children('span').html('');
		}
		function removeCmd(linkObj)
		{
		    var p=$(linkObj).parents('.item').eq(0);
		    p.remove();
		}
		$(window).resize(function(){ 
		    var w=document.body.clientWidth-28;
		    $('img').each(function()
		    {
		        var w1=$(this).attr('tag');
		        if(w1 >w)
		        {
		            $(this).width(w);
		        }		          
		        else
		        {
		            $(this).css('width',w1);
		        }
		    });
		}); 

	</script>  
	
</head>
<body>
<div id="sortcontainer"></div>
</body>
</html>
